<template>
  <div class="box">
    <div class="top"></div>
    <!-- 左 -->
    <div class="left">
      <Title class="aq" title="设备统计"></Title>
      <div class="left1">
        <LeftTop></LeftTop>
      </div>
      <Title class="aq1" title="实时用电"></Title>
      <div class="left2">
        <LeftBottom></LeftBottom>
      </div>
      <Title class="aq3" title="场地使用"></Title>
      <div class="left3">
        <LeftFoot></LeftFoot>
      </div>
    </div>
    <!-- 中 -->
    <div class="center">
      <div class="center1">
        <CenterTt></CenterTt>
      </div>
      <div class="center2">
        <CenterVue>
          <CenterBottom></CenterBottom>
        </CenterVue>
      </div>
    </div>
    <!-- 右 -->
    <div class="right">
      <Title title="设备检测" class="qq"></Title>
      <div class="right1">
        <RightTop></RightTop>
      </div>
      <Title title="实时警报" class="q1"></Title>
      <div class="right2">
        <RightBottom></RightBottom>
      </div>
    </div>
  </div>
</template>

<script setup>
import Title from '@/components/gong/Title.vue'
import LeftTop from '@/components/pagevue/LeftTop.vue'
import LeftBottom from '@/components/pagevue/LeftBottom.vue'
import CenterTt from '@/components/pagevue/Center.vue'
import CenterBottom from '@/components/pagevue/CenterBottom.vue'
import LeftFoot from '@/components/pagevue/LeftFoot.vue'
import RightTop from '@/components/pagevue/RightTop.vue'
import RightBottom from '@/components/pagevue/RightBottom.vue'
</script>

<style scoped>
.box {
  width: 100vw;
  height: 100vh;
  background: url('../assets/images/pageBg.png');
  display: flex;
  position: relative;
  left: 0;
  top: 0;
}
.top {
  width: 100vw;
  height: 70px;
  background: url('../assets//images/Top.png') no-repeat 0 0/100% 100%;
  position: absolute;
  top: 0;
}

.left {
  width: 32vw;
  height: 100vh;
  background: url('../assets//images/Left.png') no-repeat 0 0 /100% 100%;
}

.left1 {
  margin-top: 30px;
  margin-left: 70px;
  margin-right: 80px;
}
.aq {
  width: 465px;
  margin-left: 70px;
  margin-bottom: 10px;
}
.aq1 {
  width: 465px;
  margin-left: 70px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.left2 {
  margin-top: 10px;
  margin-left: 70px;
  margin-right: 90px;
}
.left3 {
  margin: 0px 70px 0px 60px;
  background: #0c1d5f;
  height: 20vh;
  /* margin-top: -45px; */
}
.aq3 {
  width: 465px;
  margin-left: 70px;
  margin-bottom: 10px;
  margin-top: 10px;
}
.center {
  width: 36vw;
  height: 100vh;
  /* background-color: red; */
}
.right {
  width: 32vw;
  height: 100vh;
  background: url('../assets/images/Right.png') no-repeat 0 0 /100% 100%;
}
.right1 {
  margin: 5px 60px 5px 60px;
  /* background: #0c1d5f; */
  height: 35vh;
}
.right2 {
  margin: 10px 60px 5px 60px;
  background: #0c1d5f;
  height: 26vh;
}

.center1 {
  width: 100%;
  height: 60vh;
  margin-top: 50px;
  /* border: solid 1px red; */
}

.center2 {
  width: 100%;
  height: 10vh;
  /* border: solid 1px red; */
  margin-top: 22vh;
}
.qq {
  width: 465px;
  margin-left: 70px;
  margin-bottom: 20px;
}
.q1 {
  width: 465px;
  margin-left: 70px;
  margin-top: 90px;
}
</style>
